<template>
    <div class="exam-monitor-container">
      <!-- 考试信息头部 -->
      <div class="exam-header">
        <h2>考试题次：2023年语文期中考试</h2>
        <div class="status-legend">
          <span><span class="status-dot online"></span> 正常监控</span>
          <span><span class="status-dot offline"></span> 监控异常</span>
        </div>
      </div>
  
      <!-- 考生监控网格 -->
      <div class="monitor-grid">
        <div 
          v-for="(student, index) in students" 
          :key="index" 
          class="monitor-card"
          :class="{ 'abnormal': !student.isOnline }"
        >
          <div class="camera-feed">
            <!-- 模拟摄像头画面 -->
            <div class="camera-placeholder">
              <i class="el-icon-video-camera"></i>
              <div v-if="!student.isOnline" class="camera-error">
                <i class="el-icon-warning"></i>
              </div>
            </div>
          </div>
          <div class="student-info">
            <div class="info-row">
              <span class="label">考生ID：</span>
              <span>{{ student.id }}</span>
            </div>
            <div class="info-row">
              <span class="label">姓名：</span>
              <span>{{ student.name }}</span>
            </div>
            <div class="info-row status">
              <span class="label">状态：</span>
              <el-tag :type="student.isOnline ? 'success' : 'danger'" size="small">
                {{ student.isOnline ? '正常' : '异常' }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 底部操作栏 -->
      <div class="action-bar">
        <el-button type="primary" @click="refreshStatus">
          <i class="el-icon-refresh"></i> 刷新状态
        </el-button>
        <el-button @click="exportReport">
          <i class="el-icon-download"></i> 导出异常报告
        </el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        students: [
          { id: 'S001', name: '张三', isOnline: true },
          { id: 'S002', name: '李四', isOnline: true },
          { id: 'S003', name: '王五', isOnline: false },
          { id: 'S004', name: '赵六', isOnline: true },
          { id: 'S005', name: '钱七', isOnline: false },
          { id: 'S006', name: '孙八', isOnline: true },
          { id: 'S007', name: '周九', isOnline: true },
          { id: 'S008', name: '吴十', isOnline: false }
        ]
      }
    },
    methods: {
      refreshStatus() {
        // 模拟随机刷新状态
        this.students = this.students.map(student => ({
          ...student,
          isOnline: Math.random() > 0.3
        }))
        this.$message.success('监控状态已刷新')
      },
      exportReport() {
        const abnormalStudents = this.students.filter(s => !s.isOnline)
        if (abnormalStudents.length === 0) {
          this.$message.info('当前没有异常考生')
        } else {
          this.$message.success(`已生成${abnormalStudents.length}条异常记录报告`)
          // 实际项目中这里调用导出API
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .exam-monitor-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }
  
  .exam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .status-legend {
    font-size: 14px;
    color: #606266;
  }
  
  .status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
  }
  
  .status-dot.online {
    background-color: #67C23A;
  }
  
  .status-dot.offline {
    background-color: #F56C6C;
  }
  
  .monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .monitor-card {
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
  }
  
  .monitor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
  
  .monitor-card.abnormal {
    border-left: 4px solid #F56C6C;
  }
  
  .camera-feed {
    position: relative;
    height: 160px;
    background-color: #000;
  }
  
  .camera-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
    font-size: 48px;
    opacity: 0.7;
  }
  
  .camera-error {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #F56C6C;
    font-size: 24px;
  }
  
  .student-info {
    padding: 15px;
  }
  
  .info-row {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
  }
  
  .info-row:last-child {
    margin-bottom: 0;
  }
  
  .info-row .label {
    color: #909399;
    width: 60px;
  }
  
  .info-row.status {
    align-items: center;
  }
  
  .action-bar {
    display: flex;
    justify-content: flex-end;
    padding: 15px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  </style>